package com.lixinxin.commoncomposeproject.screen

import android.widget.Toast
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.selection.DisableSelection
import androidx.compose.foundation.text.selection.SelectionContainer
import com.lixinxin.commoncomposeproject.R

import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController

@Composable
fun LoginScreen(navController: NavController) {

    val userName = remember {
        mutableStateOf("")
    }
    val password = remember {
        mutableStateOf("")
    }
    val passwordOff = remember {
        mutableStateOf(false)
    }

    val icon = if (passwordOff.value) {
        painterResource(id = R.mipmap.zhengyan)
    } else {
        painterResource(id = R.mipmap.biyan)
    }

    Box(
        modifier = Modifier
            .fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth(0.8f)
                .padding(top = 20.dp),
            elevation = 16.dp,
            shape = MaterialTheme.shapes.medium,
            backgroundColor = Color.White
        ) {

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {


                Text(
                    text = stringResource(id = R.string.string_login),
                    textAlign = TextAlign.Center,
                    fontSize = 20.sp,
                    modifier = Modifier.fillMaxWidth()
                )


                Spacer(modifier = Modifier.height(8.dp))

                OutlinedTextField(
                    value = userName.value,
                    label = { Text(text = "userName") },
                    leadingIcon = {
                        Icon(
                            Icons.Filled.Lock,
                            contentDescription = "userName"
                        )
                    },
                    placeholder = { Text(text = "请输入userName") },
                    onValueChange = {
                        userName.value = it
                    },
                    modifier = Modifier
                        .fillMaxWidth(),
                    maxLines = 1
                )

                Spacer(modifier = Modifier.height(8.dp))

                OutlinedTextField(
                    value = password.value,
                    label = { Text(text = "密码") },
                    leadingIcon = {
                        Icon(Icons.Filled.Lock, contentDescription = "密码")
                    },
                    trailingIcon = {
                        IconButton(onClick = {
                            passwordOff.value = !passwordOff.value
                        }) {
                            Icon(icon, contentDescription = "用户名")
                        }
                    },
                    visualTransformation = if (passwordOff.value)
                        VisualTransformation.None else PasswordVisualTransformation(),
                    placeholder = { Text(text = "请输入密码") },

                    onValueChange = {
                        password.value = it
                    },
                    modifier = Modifier
                        .fillMaxWidth(),
                    maxLines = 1
                )

                Spacer(modifier = Modifier.height(20.dp))
                Button(onClick = { }, Modifier.fillMaxWidth()) {
                    Text(text = stringResource(id = R.string.string_login))
                }
                Spacer(modifier = Modifier.height(20.dp))
                Row() {
                    Image(
                        painter = painterResource(id = R.mipmap.image0),
                        contentDescription = "",
                        modifier = Modifier.size(20.dp)
                    )
                    showText()
                    Spacer(modifier = Modifier.height(20.dp))
                }

            }

        }
    }
}


@Composable
fun showText() {
    Row() {
        DisableSelection() { Text(text = "我已阅读并同意") }
        SelectionContainer() { Text(text = "用户协议", color = Color.Blue, modifier = Modifier.clickable {  }) }
        SelectionContainer() { Text(text = "和") }
        SelectionContainer() { Text(text = "隐私政策", color = Color.Blue) }

    }
}


@Preview
@Composable
fun LoginScreenPreview() {
    //LoginScreen(navController: NavController)
}






